<template>
  <div class="home">
    <!-- 英雄区域 -->
    <section class="hero">
      <div class="container">
        <h1>分享思想，倾诉心声</h1>
        <p>欢迎来到我的个人空间，这里既是知识分享的博客，也是情感倾诉的树洞。无论是思想的碰撞还是心灵的慰藉，这里都为你敞开</p>
        <router-link to="/treehole" class="cta-button">倾诉心声</router-link>
      </div>
    </section>

    <!-- 博客区域 -->
    <section class="content-section">
      <div class="container">
        <div class="section-title">
          <h2>最新博客文章</h2>
        </div>
        <div class="blog-grid">
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else v-for="post in latestPosts" :key="post.id" class="blog-card" @click="goToDetail(post.id)">
            <div class="blog-image">
              <img :src="post.image" :alt="post.title">
            </div>
            <div class="blog-content">
              <span class="blog-category">{{ post.category }}</span>
              <h3 class="blog-title">{{ post.title }}</h3>
              <p class="blog-excerpt">{{ post.excerpt }}</p>
              <div class="blog-meta">
                <span><i class="far fa-calendar"></i> {{ post.date }}</span>
                <span><i class="far fa-comment"></i> {{ post.comments }} 评论</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 树洞区域 -->
    <section class="content-section" id="treehole">
      <div class="container">
        <div class="section-title">
          <h2>心灵树洞</h2>
        </div>
        <div class="treehole-container">
          <div class="treehole-header">
            <h3>倾诉你的心声</h3>
            <p>匿名分享，完全保密，释放你的情感</p>
          </div>
          
          <div class="treehole-form">
            <div class="form-group">
              <label for="message-title">标题（可选）</label>
              <input type="text" id="message-title" v-model="messageTitle" class="form-control" placeholder="给倾诉起个标题...">
            </div>
            
            <div class="form-group">
              <label for="message-content">倾诉内容</label>
              <textarea id="message-content" v-model="messageContent" class="form-control" placeholder="写下你的心事、感受或困惑..."></textarea>
            </div>
            
            <button class="submit-btn" @click="submitMessage">匿名分享</button>
            
            <p class="confidentiality">
              <i class="fas fa-lock"></i> 所有内容将严格保密，不会收集任何个人信息
            </p>
          </div>
          
          <div class="treehole-messages">
            <h3 style="margin-bottom: 20px;">最近倾诉</h3>
            
            <div v-for="message in recentMessages" :key="message.id" class="message-card">
              <div class="message-content">
                {{ message.content }}
              </div>
              <div class="message-meta">
                <span>{{ message.date }}</span>
                <button class="support-btn" @click="supportMessage(message)">
                  <i class="fas fa-heart"></i> 支持 <span>({{ message.supportCount }})</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HomeView',
  data() {
    return {
      messageTitle: '',
      messageContent: '',
      latestPosts: [],
      recentMessages: [
        {
          id: 1,
          content: '最近工作压力好大，感觉每天都在被deadline追赶。今天加班到深夜，回到家连说话的力气都没有了。不知道这样的日子还要持续多久...',
          date: '昨天 22:34',
          supportCount: 12
        },
        {
          id: 2,
          content: '今天鼓起勇气向喜欢的人表白了！虽然被拒绝了，但反而感觉轻松了。至少没有遗憾了，继续向前看！',
          date: '2天前',
          supportCount: 42
        },
        {
          id: 3,
          content: '毕业五年了，感觉离自己当初的梦想越来越远。每天做着不喜欢的工作，只是为了生存。该不该放弃一切重新开始？',
          date: '3天前',
          supportCount: 27
        }
      ],
      loading: false
    }
  },
  created() {
    this.fetchLatestPosts();
  },
  methods: {
    async fetchLatestPosts() {
      this.loading = true;
      try {
        const response = await axios.get('/api/blog/posts', {
          params: {
            page: 1,
            size: 3  // 只获取最新的3篇文章
          }
        });
        this.latestPosts = response.data.data.map(post => ({
          id: post.id,
          title: post.title,
          category: post.categoryName || '未分类',
          excerpt: post.content.substring(0, 100) + '...',
          image: post.coverImage || 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80',
          date: new Date(post.createdAt).toLocaleDateString('zh-CN'),
          comments: post.commentCount
        }));
      } catch (error) {
        console.error('Error fetching latest posts:', error);
      } finally {
        this.loading = false;
      }
    },
    submitMessage() {
      if (!this.messageContent.trim()) {
        alert('请填写倾诉内容');
        return;
      }
      
      // 创建新消息
      const newMessage = {
        id: this.recentMessages.length + 1,
        content: this.messageContent,
        date: '刚刚',
        supportCount: 0
      };
      
      // 添加到消息列表
      this.recentMessages.unshift(newMessage);
      
      // 清空表单
      this.messageTitle = '';
      this.messageContent = '';
      
      // 提示成功
      alert('倾诉已提交！感谢你的分享，你的内容将保持匿名。');
    },
    supportMessage(message) {
      message.supportCount++;
    },
    goToDetail(id) {
      this.$router.push(`/blog/${id}`);
    }
  }
}
</script>

<style scoped>
/* 英雄区域 */
.hero {
  padding: 80px 0 50px;
  text-align: center;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  margin-bottom: 20px;
  color: var(--dark-color);
  line-height: 1.2;
}

.dark-mode .hero h1 {
  color: var(--light-color);
}

.hero p {
  font-size: 20px;
  max-width: 700px;
  margin: 0 auto 40px;
  color: var(--text-color);
}

.cta-button {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  padding: 14px 35px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(108, 92, 231, 0.6);
}

/* 内容区域 */
.content-section {
  padding: 60px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.section-title h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  display: inline-block;
  background: var(--card-bg);
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.section-title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--secondary-color);
  z-index: 0;
}

/* 博客卡片 */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.blog-card {
  background: var(--card-bg);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.blog-image {
  height: 200px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.blog-card:hover .blog-image img {
  transform: scale(1.1);
}

.blog-content {
  padding: 25px;
}

.blog-category {
  display: inline-block;
  background: var(--secondary-color);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 15px;
}

.blog-title {
  font-size: 22px;
  margin-bottom: 12px;
  font-weight: 700;
}

.blog-excerpt {
  color: var(--text-color);
  margin-bottom: 20px;
  opacity: 0.8;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-color);
  font-size: 14px;
  opacity: 0.7;
}

/* 树洞区域 */
.treehole-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: 15px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.treehole-header {
  background: var(--primary-color);
  color: white;
  padding: 25px;
  text-align: center;
}

.treehole-header h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.treehole-form {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  transition: var(--transition);
  background: var(--light-color);
  color: var(--text-color);
}

.dark-mode .form-control {
  border-color: #444;
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.submit-btn {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: block;
  margin: 20px auto 0;
}

.submit-btn:hover {
  background: #e84393;
  transform: translateY(-2px);
}

.confidentiality {
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
  margin-top: 20px;
}

/* 树洞消息 */
.treehole-messages {
  padding: 30px;
}

.message-card {
  background: var(--light-color);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.dark-mode .message-card {
  background: rgba(0, 0, 0, 0.2);
}

.message-card::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 60px;
  font-family: serif;
  color: var(--secondary-color);
  opacity: 0.2;
  line-height: 1;
}

.message-content {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
  line-height: 1.7;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  opacity: 0.7;
}

.support-btn {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}

.support-btn:hover {
  color: var(--success-color);
}

.support-btn i {
  margin-right: 5px;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 36px;
  }
  
  .section-title h2 {
    font-size: 28px;
  }
  
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
</style> 